import React, { Component } from 'react';
import Taro ,{getCurrentInstance,eventCenter}from '@tarojs/taro';
import { View, Text, Button,Image } from '@tarojs/components';
import { Search, Toast } from '@antmjs/vantui';
import { stringifyUrl } from 'query-string';

import './index.scss'
import { clearHistory, getHistory } from '../history';

class FundSearchHome extends Component {

    config = {
        navigationBarTitleText: ''
    }

    state = {
        searchName:'',
        history:[],
    }

     // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
    // 而不是频繁地调用此 API
    $instance = getCurrentInstance()

    componentWillMount() { 
        const onShowEventId = this.$instance.router?.onShow ?? ''
        // 监听
        eventCenter.on(onShowEventId, this.onShow)
    }


     /**
     * 页面
     */
     onShow = () => {
        console.log('onShow')
        var history:any[] = getHistory()
        this.setState({history:history})
    }

    componentDidMount() { }
    componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }
    
    /**
     *清空搜索
     */
    clickClearHistory(){
        clearHistory()
        this.setState({history:[]})
    }

     /**
     * 点击搜索框
     */
     clickSearch() {
        const { searchName } = this.state;
        if (searchName.length == 0) {
            Toast.show('请输入搜索内容')
            return
        }
        Taro.navigateTo({ url: stringifyUrl({url: '/preIpoFund/search/result/index',query:{'searchName':searchName} },{encode:false}),})
    }

     /**
     * 搜索文本变化
     * @param value 
     */
    changeSearchText(value) {
        this.setState({ searchName: value.detail })
    }

    clickHistory(item){
        Taro.navigateTo({ url: stringifyUrl({url: '/preIpoFund/search/result/index',query:{'searchName':item} },{encode:false}),})
    }

    

    render() {
        
        const {history} = this.state
        return (
            <View className='page'>
                <Search  placeholder="搜索私募基金产品" inputAlign="left" onFocus={(e) => {}} onBlur={(e) => {}} renderAction={<View onClick={this.clickSearch.bind(this)}>搜索</View>} onSearch={this.clickSearch.bind(this)} onChange={(e) => this.changeSearchText(e)}></Search>
                <View className='history'>
                   <View className='history-head'>
                       <Text className='history-head-name'>历史搜索</Text>
                       <View className='clear-button' onClick={this.clickClearHistory.bind(this)}>
                          <Image src={require('@/assets/icons/public/public_clear.svg')} />
                          <Text>清空</Text>
                       </View>
                   </View>
                   <View className='history-warp'>
                       {
                        history.map((item,index) => {
                            return  <Button className='history-warp-item' onClick={(e) => this.clickHistory(item)}>{item}</Button>
                        })
                       }
                   </View>
                </View>
                <Toast/>
            </View>
        );
    }
}
export default FundSearchHome;